<template>
  <div id="userPortarit">
    <v-header title="用户画像" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div style="padding: 10px; height: calc(100% - 56px); overflow: auto">
      <div class="main" style="background-color: #fff; min-height: 100%;">
        <el-row style="border-bottom: 1px solid #d8dce5">
          <el-col :span="6">
            <div class="user">
              <img src="/static/user.png" alt="">
              <p>{{userData.cns_name}}</p>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="headTabs">
              <ul>
                <li><a :class="{actives: userTags}" @click="userClick">用户标签</a></li>
                <li><a :class="{actives: consumeTags}" @click="consumeClick">消费标签</a></li>
                <li><a :class="{actives: financeTags}" @click="financeClick">金融标签</a></li>
                <li><a :class="{actives: productTags}" @click="productClick">产品标签</a></li>
              </ul>
            </div>
            <div class="rebtns">
              <el-button type="primary" size="mini" @click="changeTagShow">{{listOrPic}}</el-button>
              <el-button type="text" size="mini" @click="returnPage">返回</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" style="border-right: 1px solid #d8dce5" :style="'height: ' + (fullHeight - 201) + 'px'">
            <div class="baseInfo">
              <ul>
                <li>
                  国籍：{{userData['nat_cod']}}
                </li>
                <li>
                  性别：{{escape(commonData, 'G020003', userData['sex_id']) || userData['sex_id']}}
                </li>
                <li>
                  民族：
                  {{escape(commonData, 'G010106', userData['race_cod']) || userData['race_cod']}}
                </li>
                <li>
                  出生日期：{{userData['birdy_dt']}}
                </li>
                <li>
                  手机号：{{userData['phone_num']}}
                </li>
                <li>
                  客户号：{{userData['cust_no']}}
                </li>
                <li>
                  证件类型：{{userData['id_type']}}
                </li>
                <li>
                  证件号：{{userData['id_no']}}
                </li>
                <li>
                  客户识别码：{{userData['cust_id']}}
                </li>
                <li>
                  最高学历：{{escape(commonData, 'G020005', userData['max_dgr']) || userData['max_dgr']}}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="eventInfo" ref="eventInfo" @mouseover="on_mouseover($event)" @mouseout="on_mouseout($event)">
              <div v-show="userTags && !userTable" ref="user" class="userTagsList" :style="'height: ' + (fullHeight - 201) + 'px'"></div>
              <div v-show="userTags && userTable"  class="userTagsTable" style="margin: 10px 0 0 15px" :style="'height: ' + (fullHeight - 201) + 'px'">
                <el-table :data="userTagsData" border>
                  <el-table-column prop="lab_cns" label="标签名"></el-table-column>
                  <el-table-column prop="text" label="标签值"></el-table-column>
                  <el-table-column prop="desc" label="标签描述"></el-table-column>
                </el-table>
              </div>
              <div v-show="consumeTags && !consumeTable" ref="consume" class="consumeTagsList" :style="'height: ' + (fullHeight - 201) + 'px'"></div>
              <div v-show="consumeTags && consumeTable" class="consumeTagsTable" style="margin: 10px 0 0 15px" :style="'height: ' + (fullHeight - 201) + 'px'">
                <el-table :data="consumeData" border>
                  <el-table-column prop="lab_cns" label="标签名"></el-table-column>
                  <el-table-column prop="text" label="标签值"></el-table-column>
                  <el-table-column prop="desc" label="标签描述"></el-table-column>
                </el-table>
              </div>
              <div v-show="financeTags && !financeTable" ref="finance" class="financeTagsList" :style="'height: ' + (fullHeight - 201) + 'px'"></div>
              <div v-show="financeTags && financeTable" class="financeTagsTable" style="margin: 10px 0 0 15px" :style="'height: ' + (fullHeight - 201) + 'px'">
                <el-table :data="monetaryData" border>
                  <el-table-column prop="lab_cns" label="标签名"></el-table-column>
                  <el-table-column prop="text" label="标签值"></el-table-column>
                  <el-table-column prop="desc" label="标签描述"></el-table-column>
                </el-table>
              </div>
              <div v-show="productTags && !productTable" ref="product" class="productTagsList" :style="'height: ' + (fullHeight - 201) + 'px'"></div>
              <div v-show="productTags && productTable" class="productTagsTable" style="margin: 10px 0 0 15px" :style="'height: ' + (fullHeight - 201) + 'px'">
                <el-table :data="productData" border>
                  <el-table-column prop="lab_cns" label="标签名"></el-table-column>
                  <el-table-column prop="text" label="标签值"></el-table-column>
                  <el-table-column prop="desc" label="标签描述"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  import {VHeader} from '../../../components'
  import ajax from '../../../api/ajax/ajax.js'
  import {nextPage} from '../../../assets/js/index'
  import api from '../../../api/url'
  import { mapGetters } from 'vuex'
  import { codeEscape } from '../../../assets/js/mixins.js'
  export default {
    mixins: [codeEscape],
    components: {
      VHeader
    },
    data () {
      return {
        commonData: [],
        fullHeight: document.documentElement.clientHeight,
        listOrPic: '表格',
        loading: null,
        userTags: true,
        userTable: false,
        consumeTags: false,
        consumeTable: false,
        financeTags: false,
        financeTable: false,
        productTags: false,
        productTable: false,
        userData: {},
        userTagsData: [],
        consumeData: [],
        monetaryData: [],
        productData: []
      }
    },
    computed: {
      ...mapGetters([
        'custTags'
      ])
    },
    methods: {
      userClick () {
        while (this.$refs.user.hasChildNodes()) {
          this.$refs.user.removeChild(this.$refs.user.firstChild)
        }
        this.userTags = true
        this.consumeTags = false
        this.financeTags = false
        this.productTags = false
        this.tagGenerate(this.userTagsData, '.userTagsList')
      },
      // 返回到精确查询页面
      returnPage () {
        const returnPage = window.sessionStorage.getItem('returnPageInUserPortarit')
        let params = {
          isReturn: true
        }
        nextPage(returnPage, params)
      },

      // 点击切换标签的显示类型
      changeTagShow () {
        if (this.listOrPic === '表格') {
          this.userTable = true
          this.consumeTable = true
          this.financeTable = true
          this.productTable = true
          this.listOrPic = '云图'
        } else if (this.listOrPic === '云图') {
          this.userTable = false
          this.consumeTable = false
          this.financeTable = false
          this.productTable = false
          this.listOrPic = '表格'
        }
      },

      consumeClick () {
        this.$refs.consume.style.width = this.$refs.user.style.width
        while (this.$refs.consume.hasChildNodes()) {
          this.$refs.consume.removeChild(this.$refs.consume.firstChild)
        }
        this.consumeTags = true
        this.userTags = false
        this.financeTags = false
        this.productTags = false
        this.tagGenerate(this.consumeData, '.consumeTagsList')
      },
      financeClick () {
        this.$refs.finance.style.width = this.$refs.user.style.width
        while (this.$refs.finance.hasChildNodes()) {
          this.$refs.finance.removeChild(this.$refs.finance.firstChild)
        }
        this.financeTags = true
        this.consumeTags = false
        this.userTags = false
        this.productTags = false
        this.tagGenerate(this.monetaryData, '.financeTagsList')
      },
      productClick () {
        this.$refs.product.style.width = this.$refs.user.style.width
        while (this.$refs.product.hasChildNodes()) {
          this.$refs.product.removeChild(this.$refs.product.firstChild)
        }
        this.productTags = true
        this.financeTags = false
        this.consumeTags = false
        this.userTags = false
        this.tagGenerate(this.productData, '.productTagsList')
      },
      evil (fn) {
        var Fn = Function
        return new Fn('return ' + fn)()
      },
      tagGenerate (data, className) {
        // var stringS = ''
        // for (var i = 0; i < data.length; i++) {
        //   var stringF = data[i][0]
        //   var stringN = data[i][1]
        //   stringS += "{text: '" + stringF + "', weight: '" + stringN + "',html: {'class': 'span_list',onmouseover:'on_mouseover(this,event)',onmouseout:'on_mouseout()'}},"
        // }
        // var stringFist = stringS
        // var wordFist = this.evil('[' + stringFist + ']')
        $(className).jQCloud(data)
        // $(function () {
        //   $(className).jQCloud(wordFist)
        // })
      },
      on_mouseover (e) {
          if (e.target.nodeName === 'SPAN') {
            let left = Number(e.target.style['left'].slice(0, length - 3)) + 200
            let top = Number(e.target.style['top'].slice(0, length - 3)) + 45
            let p = document.createElement('p')
            p.setAttribute('id', 'hoverp')
            p.setAttribute('style', 'position: absolute; top: ' + top + 'px;' + 'left: ' + left + 'px')
            p.innerHTML = `标签描述：${e.target.getAttribute('lab_cns')}`
            this.$refs.eventInfo.appendChild(p)
        }
      },
      on_mouseout (e) {
        if (e.target.nodeName === 'SPAN') {
          let p = document.getElementById('hoverp')
          this.$refs.eventInfo.removeChild(p)
        }
      },
      queryUserTagList () {
        let params = {
          cust_no: this.$route.query.cust_no
        }
        ajax.post(api.SIMILAR_PEOPLE, params)
          .then(res => {
            this.loading.close()
            this.userData = res.data.base_info
            let allData = JSON.parse(JSON.stringify(res.data.conditions).replace(/code_value_nm_cns/g, 'text'))
            allData.map(item => {
              item.controls.map(it => {
                it.html = {
                  lab_cns: it.lab_cns,
                  id: ''
                }
                return it
              })
              return item
            })
            this.userTagsData = allData[0].controls
            this.consumeData = allData[1].controls
            this.monetaryData = allData[2].controls
            this.productData = allData[3].controls
            this.tagGenerate(this.userTagsData, '.userTagsList')
          })
        this.loading = this.$loading({fullscreen: false, target: '#userPortarit'})
      }
    },
    mounted () {
      // window.on_mouseover = function (e) {
      //   var txt = $(e).html()
      //   ev = e || event
      //   $.each(data, function(i, item) {
      //     if(txt == item[0]){
      //       var html = item[0] + "<br />曝光数" + item[1] + "<br />" + item[2]
      //       $("#my_favorite_latin_words").after("<div class='append_div' style='left:" + ev.clientX + "px; top:" + ev.clientY + "px; '>" + html + "</div>")
      //       return
      //     }
      //   })
      // }
      // window.on_mouseout = function () {
      //   $(".append_div").remove()
      // }
      this.queryUserTagList()
      // this.tagGenerate(this.consumeData, '.consumeTagsList')
      // this.tagGenerate(this.consumeData, '.financeTagsList')
      this.commonData = JSON.parse(sessionStorage.getItem('commonData'))
    }
  }
</script>
<style lang="stylus" scoped>
  #userPortarit
    height 100%
    .main
      .user:after
        content ''
        display table
        clear both
      .user
        margin-top 15px
        margin-left 15px
        background-color #fff
        img
          width 50px
          height 50px
          border-radius 50%
          float left
          margin-right 10px
          margin-bottom 15px
        p
          float left
      .headTabs
        .actives
          color #409EFF
        ul
          li
            float left
            margin-left 40px
            a
              display inline-block
              height 80px
              line-height 80px
      .rebtns
        float: right
        margin-top 25px
        margin-right 15px
      .baseInfo
        padding-top 10px
        margin-left 15px
        ul
          li
            margin-bottom 15px
            padding-bottom 3px
            border-bottom 1px solid #d8dce5
      .eventInfo
        #hoverp
          width 140px
          height 50px
          background-color #000
          opacity 0.6
          border-radius 5px
          line-height 50px
          color #fff
        div.jqcloud
          color #09f
          a
            color inherit
          span:hover
            color red
            font-size 40px
            font-weight bold
          span.test
              // color #0cf
              color red !important
            &.w9
              color #0cf
            &.w8
              color #0cf
            .w7
              color #39d
            .w6
              color #90c5f0
            .w5
              color #90a0dd
            .w4
              color #90c5f0
            .w3
              color #a0ddff
            .w2
              color #99ccee
            .w1
              color #aab5f0
        .deviceinfo
          ul
            li
              margin-bottom 15px
</style>

<style lang="stylus">
  #userPortarit
    height 100%
    .main
      .eventInfo
        #hoverp
          width 140px
          height 50px
          background-color #000
          opacity 0.6
          border-radius 5px
          line-height 50px
          color #fff
        div.jqcloud
          color #09f
          a
            color inherit
          span:hover
            color red
            font-size 40px
            font-weight bold
          span.test
              // color #0cf
              color red !important
            &.w9
              color #0cf
              font-size: 360%
            &.w10
              color #0cf
              font-size: 360%
            &.w8
              color #0cf
              font-size: 350%
            .w7
              color #39d
              font-size: 240%
            .w6
              color #90c5f0
              font-size: 210%
            .w5
              color #90a0dd
              font-size: 190%
            .w4
              color #90c5f0
              font-size: 170%
            .w3
              color #a0ddff
              font-size: 150%
            .w2
              color #99ccee
              font-size: 130%
            .w1
              color #aab5f0
              font-size: 110%
</style>
